<template>
    <div class="wrap">
        <Modal
                v-model="mkhead_modal_enabled"
                footer-hide
                :mask-closable="false"
                :styles="{ top: '200px' }"
                width="650"
        >
            <mkHead @hide_mkhead_modal="hide_mkhead_modal"></mkHead>
        </Modal>
        <div class="content clearfix">
            <left-menu class="fl"></left-menu>
            <div class="content-box fr">
                <Form :label-width="80" style="margin-top: 30px;">
                    <FormItem label="头像">
                        <div class="headpic-box">
                            <img class="headpic" :src="$target+headPic"/>
                            <div class="palceholder" @click="show_mkhead_modal">
                                更换头像
                            </div>
                        </div>
                    </FormItem>
                    <FormItem label="用户名">
                        <Input
                                :disabled="edit_abled"
                                style="width: 200px"
                                v-model="username"
                                placeholder="请输入用户名"
                        />
                    </FormItem>
                    <FormItem label="密码">
                        <Input
                                type="password"
                                password
                                :disabled="password_edit_abled"
                                style="width: 200px"
                                v-model="password"
                                placeholder="请输入密码"
                        />
                        <ButtonGroup
                                class="btn"
                                style="display: inline-block;margin-left:20px;"
                                size="small"
                        >
                            <Button type="primary" @click="changeMerchant">
                                修改
                            </Button>
                        </ButtonGroup>
                    </FormItem>
                    <FormItem label="电话号码">
                        <Input
                                :disabled="edit_abled"
                                style="width: 200px"
                                v-model="phone"
                                placeholder="请输入电话号码"
                        />
                    </FormItem>
                    <FormItem label="性别">
                        <RadioGroup v-model="sex">
                            <Radio :disabled="edit_abled" label="男" >男</Radio>
                            <Radio :disabled="edit_abled" label="女"  >女</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="学校名称">
                        <Input
                                :disabled="edit_abled"
                                style="width: 200px"
                                v-model="school"
                                placeholder="请输入学校名称"
                        />
                    </FormItem>
                    <FormItem label="所在系名">
                        <Input
                                :disabled="edit_abled"
                                style="width: 200px"
                                v-model="department"
                                placeholder="请输入系名"
                        />
                    </FormItem>
                    <FormItem>
                        <Button type="warning" @click="edit_allow">修改</Button>
                        <Button
                                style="margin-left: 50px;"
                                type="primary"
                                @click="handleSubmit()"
                        >保存</Button
                        >
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>

<script>
    import leftMenu from "./UserMenu.vue";
    import mkHead from "./MkHead.vue";
    export default {
        name: "UserInfo",
        components: {
            leftMenu,
            mkHead
        },
        data() {
            return {
                user:'',
                mkhead_modal_enabled: false, // 是否显示裁剪头像的框
                edit_abled: true,
                password_edit_abled:true,
                username: '',
                password:'',
                sex: '',
                sexCode:'',
                phone:'',
                school:'',
                department:'',
                headPic:'',
            }
        },
        created() {
            //获取登录成功后使用localStorage.setItem("user")保存到本地的数据
           this.user=JSON.parse(localStorage.getItem("user"));
            this.username = this.user.username;
            this.password=this.user.password;
            if(this.user.sex==1) {
                this.sex="男"
                this.sexCode=this.user.sex
            }else {
                this.sex = "女";
                this.sexCode=this.user.sex
            }
            this.phone =this.user.phone;
            this.school = this.user.school;
            this.department = this.user.department;
            this.headPic = this.user.headPic;
        },
        methods: {
            /**
             * 隐藏头像裁剪弹框
             */
            hide_mkhead_modal(user) {
                this.mkhead_modal_enabled = false;
                this.user=user;
                this.headPic=this.user.headPic;
            },
            /**
             * 显示头像裁剪弹框
             */
            show_mkhead_modal() {
                this.mkhead_modal_enabled = true;
            },
            /**
             * 提交表单
             */
            handleSubmit() {
                if (this.edit_abled == true && this.password_edit_abled==true) {
                    this.$Message.error('请先点击修改按钮');
                    return;
                }
                this.$axios.post("/api/user/updateUser",{
                    userId:this.user.userId,
                    sex:this.sexCode,
                    phone:this.phone,
                    school: this.school,
                    username: this.username,
                    password: this.password,
                    department: this.department,
                    headPic:this.headPic
                }).then(res => {
                    this.$Message.success('修改成功');
                    this.edit_abled = !this.edit_abled;
                    //更新本地信息
                    let user = JSON.stringify(res.data);
                    localStorage.setItem("user", user);
                    // 刷新本地信息
                    this.user=JSON.parse(localStorage.getItem("user"));
                    this.username = this.user.username;
                    this.password=this.user.password;
                    if(this.user.sex==1) {
                        this.sex="男"
                        this.sexCode=this.user.sex
                    }else {
                        this.sex = "女";
                        this.sexCode=this.user.sex
                    }
                    this.phone =this.user.phone;
                    this.school = this.user.school;
                    this.department = this.user.department;
                    this.headPic=this.user.headPic;
                    this.password_edit_abled=!this.password_edit_abled;
                })
            },
            /**
             * 提交表单
             */
            callback_edit_info(ret) {
                if (ret.code == 200) {
                    // 保存用户信息
                    this.set_user_info(ret.data);
                    this.$Message.success(ret.msg);
                    this.edit_abled = true;
                } else {
                    this.$Message.error(ret.msg);
                }
            },
            /**
             * 允许修改表单
             */
            edit_allow() {
                this.edit_abled = !this.edit_abled;
                this.password_edit_abled=!this.password_edit_abled;
            },
            changeMerchant(){
                this.password_edit_abled=!this.password_edit_abled;
            }
        }
    }

</script>

<style scoped>
    .wrap {
        height: 100%;
        overflow-y: auto;
        background-color: #f8f8f9;
    }

    .content {
        margin: 30px auto;
        width: 1000px;
        display: flex;
    }

    .content-box {
        min-height: 600px;
        width: 760px;
        background-color: #fff;
        padding-left: 30px;
    }

    .headpic-box {
        position: relative;
        width: 60px;
        height: 60px;
        border-radius: 100px;
        overflow: hidden;
    }
    .headpic-box .headpic {
        width: 100%;
        min-height: 100%;
        display: block;
        cursor: pointer;
    }
    .headpic-box .palceholder {
        display: none;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding-top: 15px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.4);
        color: #eee;
        z-index: 1;
    }
    .headpic-box:hover .palceholder {
        display: block;
    }
</style>